import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import Button from '@mui/material/Button';
import "./Practice.less"
import PracticeItem from './PracticeItem';
import { GetTestApi } from "@/request/api"
import { useNavigate } from 'react-router-dom';
export default function Practice() {
    let nav = useNavigate()
    let [textCategory, setTextCategory] = useState<ITestdata[]>([])
    let [testNumVal, setTestNumVal] = useState<string | number>(0)
    let [testType, setTestTypeVal] = useState<string | number>("all")
    let [questionType, setQuestionTypeVal] = useState<string | number>("all")
    let params = useParams()
    // console.log(params.code);
    //辅助数组
    const textType = [
        { key: "全部", value: "all" },
        { key: "未作", value: "notdone" },
        { key: "已做", value: "none" },
        { key: "错误", value: "err" },
    ]//试题分类
    const textNum = [
        { key: "5", value: 5 },
        { key: "10", value: 10 },
        { key: "20", value: 20 },
        { key: "30", value: 30 },
        { key: "50", value: 50 },
        { key: "100", value: 100 },
    ]
    interface IFz {
        [k: string]: string
    }
    const fuzhuCategory: IFz = {
        all: "全部",
        qa: "问答",
        fill: "填空",
        one: "单选",
        check: "判断",
        code: "编程",
        many: "多选"
    }

    const getTestCategory = async () => {
        let res = await GetTestApi(params.code!)//加！告诉ts这个地方一定有
        // console.log(res.data);
        let ndata = res.data.map((item: { key: string | number; value: string; }) => {
            let k = fuzhuCategory[item.key] + "/" + item.value
            return { key: k, value: item.key }
        })
        // console.log(ndata);
        setTextCategory(ndata)
    }
    useEffect(() => {
        getTestCategory()
    })

    //进入练习模式
    const goTest = () => {
        nav("/test", {
            state: {
                testNum: testNumVal,
                testType: testType,
                actionCode: params.code,
                questionType: questionType,
            }
        })
    }

    return (
        <div className='practice'>
            <div className='top'>
                <button className='btn1' onClick={goTest}>进入练习模式</button>
                <button className='btn2'>进入考试模式</button>
            </div>
            <div className='bottom'>
                <PracticeItem title="试题分类" data={textType} getVal={(p) => {
                    setTestTypeVal(p);
                }}></PracticeItem>
                <PracticeItem title="题目分类" data={textCategory} getVal={(p) => {
                    setQuestionTypeVal(p);
                }}></PracticeItem>
                <PracticeItem title="做题数量" data={textNum} getVal={(p) => {
                    setTestNumVal(p);
                }}></PracticeItem>
            </div>
        </div>
    )
}
